<html>

	<head>
		<title>文字滚动</title>
		<meta charset="UTF-8"/>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			#box{
				box-sizing: border-box;
				background-color: #00A1F5;
				font-size: 28px;
				padding-left: 10px;
				color: #FFFFFF;
				width: 450px;
				height: 50px;
				line-height: 50px;
			}
		</style>
	</head>

	<body>
		<div id="box">
			<ul>
				<li>Hello,world1</li>
				<li>Hello,world2</li>
				<li>Hello,world3</li>
				<li>Hello,world4</li>
				<li>Hello,world5</li>
				<li>Hello,world6</li>
			</ul>
		</div>

		<script type="text/javascript">
			function init(opt) {

				var cssText = "height:" + opt.height + "px;overflow:hidden;";
				var cur = 0;
				opt.el.style.cssText = cssText;

				var ul = opt.el.querySelector('ul');

				ul.style.transitionTimingFunction = 'ease-in-out';

				var first = ul.querySelector('li');
				var cloneEl = first.cloneNode(true);

				ul.appendChild(cloneEl);

				var list = ul.querySelectorAll('li');
				var len = list.length;

				for(var i = 0; i < len; i++) {
					var tempCssText = 'list-style:none;height:' + opt.height + 'px;line-height:' + opt.height + 'px';
					list[i].style.cssText = tempCssText;
				}

				setInterval(function() {
					if(cur === 0) {
						ul.style.transitionDuration = '500ms';
					}
					cur++;
					ul.style.transform = 'translateY(-' + cur * opt.height + 'px)';

				}, opt.autoplay);

				ul.addEventListener('webkitTransitionEnd', function() {
					if(cur === len - 1) {
						ul.style.transitionDuration = '0ms';
						setTimeout(function() {
							ul.style.transform = 'translateY(0px)';
							cur = 0;
						}, 0);
					}
				});

			}

			init({
				el: document.getElementById("box"),
				height: document.getElementById("box").clientHeight,
				autoplay: 3000
			});
		</script>
	</body>

</html>